<template>
    <div class="shop-info">
        <div class="info-title">
            <img :src="shop.shopLogo">
            <span>{{shop.name}}</span>
        </div>
        <div class="shop-desc">
            <div class="shop-account">
                <div>
                    <div class="shop-acount-title">{{shop.cSells}}</div>
                    <div>总销量</div>
                </div>
                <div>
                    <div class="shop-acount-title">{{shop.cGoods}}</div>
                    <div>全部宝贝</div>
                </div>
            </div>
            <div class="shop-score">
                <div class="shop-score-item"
                     v-for="(item,index) in shop.score"
                     :key="index">
                    <span class="shop-score-title">{{item.name}}</span>
                    <span>
                        <span class="shop-score-rank"
                              :class="{'shop-score-rank-better':item.isBetter}">
                            {{item.score}}
                        </span>
                        <span>
                            <span class="shop-score-rank-flag"
                                  :class="{'shop-score-rank-better-flag':item.isBetter}">
                                {{item.isBetter?'高':'低'}}
                            </span>
                        </span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DetailShopInfo',
    props: {
        shop: {
            type: Object,
            default: function () {
                return {};
            }
        }
    }

}
</script>
<style scoped>
.shop-info {
    margin-top: 10px;
    background-color: #fff;
}
.info-title {
    padding: 20px 10px;
}
.info-title img {
    height: 50px;
    vertical-align: middle;
    border-radius: 3px;
}
.info-title span {
    vertical-align: middle;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
}
.shop-desc {
    display: flex;
    /* text-align: center; */
    align-items: center;
}
.shop-account {
    flex: 1;
    display: flex;
    text-align: center;
    border-right: 1px solid #e5e5e5;
    margin: 15px 0px;
}

.shop-account > div {
    flex: 1;
    font-size: 12px;
}
.shop-acount-title {
    font-size: 20px;
    padding-bottom: 5px;
    font-weight: 600;
}
.shop-score {
    flex: 1;
    padding: 0px 15px;
}
.shop-score-item {
    margin: 10px 0px;
    display: flex;
    font-size: 14px;
}
.shop-score-item > span {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}
.shop-score-item > span > span {
    flex: 1;
}
.shop-score-rank {
    color: green;
}
.shop-score-rank-better {
    color: red;
}

.shop-score-rank-flag {
    font-size: 12px;
    padding: 3px;
    color: #fff;
    border-radius: 5px;
    background-color: green;
}

.shop-score-rank-better-flag {
    background-color: red;
}
</style>